<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-09 10:07:06
 * @LastEditTime: 2019-10-19 16:12:24
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div class="arrivalmoneyred animated bounceInRight">
    <div class="header" v-show="canver_a">
      <p style="font-size:0.14rem;color:#979797;display:flex;align-items: center;" @click="hist">
        <img src="../../assets/histry.png" alt>返回
      </p>
      <p class="text1">{{p}}日报</p>
      <p class="text2" @click="category">
        {{text_title_right}}
        <img src="../../assets/more.png">
      </p>
    </div>
    <mt-popup v-model="popupVisible" position="top" class="category_box">
      <div class="category">
        <ul>
          <li v-for="(i,index) in text" :key="index" @click="text_title(index)">{{i}}</li>
        </ul>
      </div>
    </mt-popup>
    <div class="content" v-show="canver_a">
      <div class="zifu">
        <dl>
          <dd>
            <div class="box_1"></div>
            {{shuzi_1}}
          </dd>
          <dd>
            <div class="box_3"></div>
            {{shuzi_3}}
          </dd>
        </dl>
        <dl style="padding-bottom:0.12rem;">
          <dd>
            <div class="box_1"></div>
            {{shuzi_4}}
          </dd>
          <dd>
            <div class="box_2"></div>
            {{shuzi_6}}
          </dd>
        </dl>
      </div>
      <div id="myCharts_d" :style="{width: '100%', height: '37%'}"></div>
      <div id="myCharts" :style="{width: '100%', height: '37%'}"></div>
      <div class="zifu">
        <dl style="padding-bottom:0.1rem;">
          <p>日平均值</p>
          <dd>
            <div class="box_1"></div>
            {{shuzi_7}}
          </dd>
        </dl>
      </div>
      <div class="yisi">
        <dl>
          <dd>
            <div class="box_1"></div>目标
          </dd>
          <dd>
            <div class="box_2"></div>已完成
          </dd>
          <dd>
            <div class="box_4"></div>达标
          </dd>
          <dd>
            <div class="box_3"></div>未达标
          </dd>
        </dl>
      </div>
    </div>
    <div class="content_heng" v-show="!canver_a">
      <div class="zifu">
        <dl>
          <dd>
            <div class="box_1"></div>
            {{shuzi_1}}
          </dd>
          <dd>
            <div class="box_3"></div>
            {{shuzi_3}}
          </dd>
        </dl>
        <dl style="padding-bottom:0.07rem;">
          <dd>
            <div class="box_1"></div>
            {{shuzi_4}}
          </dd>
          <dd>
            <div class="box_2"></div>
            {{shuzi_6}}
          </dd>
        </dl>
      </div>
      <div id="myCharts_d_h" :style="{width: '660px', height: '280px'}"></div>
      <div id="myCharts_h" :style="{width: '660px', height: '280px'}"></div>
      <div class="zifu">
        <dl style="padding-bottom:0.05rem;">
          <p>日平均值</p>
          <dd>
            <div class="box_1"></div>
            {{shuzi_7}}
          </dd>
        </dl>
      </div>
      <div class="yisi">
        <dl>
          <dd>
            <div class="box_1"></div>目标
          </dd>
          <dd>
            <div class="box_2"></div>已完成
          </dd>
          <dd>
            <div class="box_4"></div>达标
          </dd>
          <dd>
            <div class="box_3"></div>未达标
          </dd>
        </dl>
      </div>
    </div>
    <mt-popup v-model="popupVisibl" position="bottom" class="bottom_mode">
      <!-- <div class="title">
        <p class="text_1" @click="btn_close">
          <img src="../../assets/shut.png" alt>
        </p>
        <p class="text_2">时间选择</p>
        <p class="text_3" @click="btn_sure">确定</p>
      </div> -->
      <van-datetime-picker
        v-model="pickerVisible"
        type="date"
        @confirm='btn_sure'
        @cancel='btn_close'
        confirm-button-text='确定'
        title="时间选择"
        :min-date='minDate'
        :max-date='maxDate'
        :visibleItemCount='3'
      >
      </van-datetime-picker>
    </mt-popup>
    <div class="footer_box" v-show="canver_a">
      <div class="footer">
        <p style="border-right:0.01rem solid #eee;color:#1A2533;border-bottom:0.02rem solid #1A2533;" @click="guguoqu">顾过去</p>
        <p
          class=p_text
          @click="ing"
          style="border-right:0.01rem solid #eee;"
        >看现在</p>
        <p class=p_text @click="ed">望未来</p>
      </div>
    </div>
  </div>
</template>

<script>
import {
  check_login,
  query_ent_dept_list,
  query_category_info_list,
  get_inv_daily_history,
  get_inv_daily
} from "../../api/api.js";
import { Toast } from "mint-ui";
export default {
  name: "arrivalmoneyred",
  inject: ["reload"],
  data() {
    return {
      minDate:new Date('2019-09-01'),
      maxDate:'',
      canver_a:true,
      xian:true,
      wei:true,
      mobile: "",
      p: "",
      text_title_right: "筛选",
      text: ["部门", "产品"],
      popupVisible: false,
      popupVisibl:false,
      yuan: "元",
      ent_id: null,
      dept_id: null,
      staff_id: null,
      prod_id: null,
      cat_id: null,
      li_list_1: [],
      li_list_2: [],
      li_list_3: [],
      li_list_4: [],
      date_list: "",
      amt_list_a:[],
      amt_list:[],
      funn_list:[],
      pickerVisible:'',
      shanggeyue:'',
      shuzhi:1,
      shuzi_1:'',
      shuzi_3:'',
      shuzi_4:'',
      shuzi_6:'',
      shuzi_7:'',
      xian_shijian:'',
      ed_sj:''
    }
  },
  mounted() {
    // 判断是否登录
    if (sessionStorage.getItem("mobile") != null) {
      this.mobile = JSON.parse(sessionStorage.getItem("mobile"));
    }
    check_login({
      data: {
        mobile: this.mobile
      }
    }).then(res => {
      if (res.data.code == 11001) {
      } else if (res.data.code == 11000) {
        this.$toast("未登录，请重新登录");
        this.$router.push("/");
      }
    });
    if (sessionStorage.getItem("mlbb_xinxi") != null) {
      this.dept_id = JSON.parse(sessionStorage.getItem("mlbb_xinxi")).ent_id;
    }
    console.log(this.dept_id);
    if (sessionStorage.getItem("xuan") != null) {
      this.li_list_1 = JSON.parse(sessionStorage.getItem("xuan"));
    }
    if (sessionStorage.getItem("xuan_two") != null) {
      this.li_list_2 = JSON.parse(sessionStorage.getItem("xuan_two"));
    }
    if (sessionStorage.getItem("xuan_three") != null) {
      this.li_list_3 = JSON.parse(sessionStorage.getItem("xuan_three"));
    }
    if (sessionStorage.getItem("xuan_four") != null) {
      this.li_list_4 = JSON.parse(sessionStorage.getItem("xuan_four"));
    }
    if (sessionStorage.getItem("date_list_fapiao_r") != null) {
      this.date_list = JSON.parse(
        JSON.parse(sessionStorage.getItem("date_list_fapiao_r"))
      );
    }
    if (sessionStorage.getItem("text_title") != null) {
      this.p = JSON.parse(sessionStorage.getItem("text_title"));
    }
    if (sessionStorage.getItem("ed_sj") != null) {
      this.ed_sj = JSON.parse(sessionStorage.getItem("ed_sj"));
    }
    console.log(this.date_list)
    this.danwei()
    this.jinyue()
    this.canver()
    this.canver_two()
    this.heng()
  },
  created() {
    this.shang()
    this.maxDate=new Date(this.shanggeyue)
    this.pickerVisible=new Date(this.shanggeyue)
  },
  watch: {
  },
  methods: {
    // 算单位  =====  数值添加====各种算都在这里面
    danwei(){
      let zongmubiao=this.date_list.amt_aim_sum_list[this.date_list.amt_aim_sum_list.length-1].toFixed(0)+''
      if(zongmubiao.length<=4){
        this.yuan='元'
        this.shuzhi=1
      }else if(zongmubiao.length<=8&&zongmubiao.length>4){
        this.yuan='万元'
        this.shuzhi=10000
      }else if(zongmubiao.length>8){
        this.yuan="亿"
        this.shuzhi=100000000
      }
      console.log(4444,this.shuzhi)
      // 日报单位转换
      this.date_list.amt_aim_avg=Number((this.date_list.amt_aim_avg/this.shuzhi).toFixed(2));
      this.date_list.amt_aim_left_avg=Number((this.date_list.amt_aim_left_avg/this.shuzhi).toFixed(2));
      this.date_list.amt_inv_avg=Number((this.date_list.amt_inv_avg/this.shuzhi).toFixed(2))
      this.date_list.amt_inv_est=Number((this.date_list.amt_inv_est/this.shuzhi).toFixed(2))
      this.date_list.amt_inv_sum=Number((this.date_list.sum/this.shuzhi).toFixed(2))
      this.date_list.amt_task_aim=Number(this.date_list.amt_aim.toFixed(2))
      this.date_list.value_y=Number((this.date_list.value_y/this.shuzhi).toFixed(2))
      for(let i=0;i<this.date_list.amt_aim_sum_list.length;i++){
        this.date_list.amt_aim_sum_list[i]=Number((this.date_list.amt_aim_sum_list[i]/this.shuzhi).toFixed(2))
      }
      for(let i=0;i<this.date_list.amt_inv_sum_list.length;i++){
        this.date_list.amt_inv_sum_list[i].amt_inv_day=Number((this.date_list.amt_inv_sum_list[i].amt_inv_day/this.shuzhi).toFixed(2))
        this.date_list.amt_inv_sum_list[i].amt_inv_sum=Number((this.date_list.amt_inv_sum_list[i].amt_inv_sum/this.shuzhi).toFixed(2))
      }
      // 把用到的东西放到一个数值里
      let can_list = this.date_list.amt_inv_sum_list;
      can_list.map((item, index) => {
        this.amt_list_a.push(
          Object.assign(
            {},
            {
              value: can_list[index].amt_inv_sum,
              status: parseInt(can_list[index].flag_finish)
            }
          )
        );
        this.amt_list.push(
          Object.assign({}, { value: can_list[index].amt_inv_day })
        );
        this.funn_list.push(
          Object.assign({}, { value: can_list[index].amt_inv_sum })
        );
      });
      
      
      // 算显示数字
      let zong=this.date_list.amt_aim_sum_list[this.date_list.amt_aim_sum_list.length-1]
      let shuz_1=this.date_list.amt_inv_sum_list[this.date_list.amt_inv_sum_list.length-1].amt_inv_sum
      this.shuzi_1=shuz_1.toFixed(2)+'('+((shuz_1/zong)*100).toFixed(2)+'%'+')'
      this.shuzi_6=(zong-shuz_1).toFixed(2)+'('+(((zong-shuz_1)/zong)*100).toFixed(2)+'%)'
      this.shuzi_3=zong.toFixed(2)+'(100.00%)'
      this.shuzi_4=shuz_1.toFixed(2)+'('+((shuz_1/zong)*100).toFixed(2)+'%)'
      this.shuzi_7=this.date_list.amt_inv_avg.toFixed(2)+'('+((this.date_list.amt_inv_avg/zong)*100).toFixed(2)+'%)'
      // 千位符
      var reg = /(-?\d+)(\d{3})/;
      this.shuzi_1=this.shuzi_1.replace(reg, "$1,$2");
      this.shuzi_3=this.shuzi_3.replace(reg, "$1,$2");
      this.shuzi_4=this.shuzi_4.replace(reg, "$1,$2");
      this.shuzi_6=this.shuzi_6.replace(reg, "$1,$2");
      this.shuzi_7=this.shuzi_7.replace(reg, "$1,$2");
    },
    // 时间小于10前面加0
    pa(s) {
      return s < 10 ? "0" + s : s;
    },
    // 获取本月时间
    jinyue() {
      this.xian_shijian = new Date();
      var xian_sj = this.xian_shijian;
      this.xian_shijian =
        xian_sj.getFullYear() + "/" + this.pa(xian_sj.getMonth() + 1) + "/";
      console.log(6666, this.xian_shijian);
    },
    // 获取上个月的时间
    shang() {
      var nowdays = new Date();
      var year = nowdays.getFullYear();
      var month = nowdays.getMonth();
      if (month == 0) {
        month = 12;
        year = year - 1;
      }
      if (month < 10) {
        month = "0" + month;
      }
      var firstDay = year + "-" + month + "-" + "01"; //上个月的第一天
      var myDate = new Date(year, month, 0);
      var lastDay = year + "-" + month + "-" + myDate.getDate(); //上个月的最后一天
      this.shanggeyue = lastDay;
    },
    // id
    idd(){
      //部门id
      if (this.li_list_1.length == 0) {
        this.ent_id = null;
      } else if (this.ent_id == "") {
        for (var i = 0; i < this.li_list_1.length; i++) {
          this.ent_id.push(this.li_list_1[i].id);
        }
        if (this.li_list_1.constructor === Array) {
          this.ent_id = this.ent_id.join(",");
        }
      }
      // 人员id
      if (this.li_list_3.length == 0) {
        this.staff_id = null;
      } else if (this.staff_id == "") {
        for (var i = 0; i < this.li_list_3.length; i++) {
          this.staff_id.push(this.li_list_3[i].id);
        }
        if (this.li_list_3.constructor === Array) {
          this.staff_id = this.staff_id.join(",");
        }
      }
      // 产品id
      if (this.li_list_2.length == 0) {
        this.prod_id = null;
      } else if (this.prod_id == "") {
        for (var i = 0; i < this.li_list_2.length; i++) {
          this.prod_id.push(this.li_list_2[i].id);
        }
        if (this.li_list_2.constructor === Array) {
          this.prod_id = this.prod_id.join(",");
        }
      }
      // 产品类型id
      if (this.li_list_4.length == 0) {
        this.cat_id = null;
      } else if (this.cat_id == "") {
        for (var i = 0; i < this.li_list_4.length; i++) {
          this.cat_id.push(this.li_list_4[i].id);
        }
        if (this.li_list_4.constructor === Array) {
          this.cat_id = this.cat_id.join(",");
        }
      }
    },
    // 点击的时间
    btn_close(){
      this.popupVisibl=false
    },
    btn_sure(){
      this.guoqu()
    },
    // 顾过去
    guguoqu() {
      // this.$refs.picker.open();
      this.popupVisibl=true
    },
    // 过去接口
    guoqu() {
      this.$loading.open();
      var d = this.pickerVisible;
      var a =
        d.getFullYear()+''  + this.pa((d.getMonth() + 1))+ this.pa(d.getDate())
      console.log('时间',a)
      this.idd()
      get_inv_daily_history({
        data: {
          date: a,
          ent_id: this.dept_id, //企业与部门id写反了
          dept_id: this.ent_id,
          staff_id: this.staff_id,
          prod_id: this.prod_id,
          ent_id:this.ent_id,
        }
      }).then(res => {
        this.$loading.close();
        if (res.data.code == 10043) {
          sessionStorage.setItem(
            "date_list_fapiao_r",
            JSON.stringify(res.data.body.data)
          );
          sessionStorage.setItem(
            "ed_sj",
            JSON.stringify(a.slice(0,6))
          );
          this.$toast("获取成功");
          location.reload();
          // location.reload();
        } else if (res.data.code == 10044) {
          this.$toast("获取失败");
        }else if(res.data.code==10045){
            this.$router.push("/nodata");
        }
        console.log(res);
      });
    },
    // 看现在
    ing() {
      this.$loading.open();
      get_inv_daily({
          data: {
          ent_id: this.dept_id, //企业与部门id写反了
          dept_id: this.ent_id,
          staff_id: this.staff_id,
          prod_id: this.prod_id,
          ent_id:this.ent_id,
          est_type:'1'
          }
      }).then(res => {
          console.log(res);
          this.$loading.close();
          if (res.data.code == 10043) {
          sessionStorage.setItem(
              "date_list_fapiao_r",
              JSON.stringify(res.data.body.data)
          );
          this.$router.push('/arrivalmoneyr')
          sessionStorage.setItem("fa_r_xian", JSON.stringify(1));
          sessionStorage.setItem("fang_r_xian", JSON.stringify(1));
          } else if (res.data.code == 10044) {
          this.$toast("合成失败");
          } else if (res.data.code == 10045) {
          this.$router.push("/nodata");
          }
      });
    },
    // 望未来
    ed() {
      this.$loading.open();
      get_inv_daily({
          data: {
          ent_id: this.dept_id, //企业与部门id写反了
          dept_id: this.ent_id,
          staff_id: this.staff_id,
          prod_id: this.prod_id,
          ent_id:this.ent_id,
          est_type:'1'
          }
      }).then(res => {
          console.log(res);
          this.$loading.close();
          if (res.data.code == 10043) {
          sessionStorage.setItem(
              "date_list_fapiao_r",
              JSON.stringify(res.data.body.data)
          );
          sessionStorage.setItem("fa_r_xian", JSON.stringify(2));
          sessionStorage.setItem("fang_r_xian", JSON.stringify(1));
          this.$router.push('/arrivalmoneyr')
          } else if (res.data.code == 10044) {
          this.$toast("合成失败");
          } else if (res.data.code == 10045) {
          this.$router.push("/nodata");
          }
      });
    },
    // 返回销售页
    hist() {
      this.$router.push("/sale");
    },
    // 选择图表类型
    category() {
      this.popupVisible = true;
    },
    // 点击切换图表类型
    text_title(i) {
      if (this.text[i] == "部门") {
        this.$loading.open();
        query_ent_dept_list({
          data: {
            parent_id: "0",
            ent_id: this.dept_id,
            active:'1'
          }
        }).then(res => {
          this.$loading.close();
          console.log(res);
          if (res.data.code == 10168) {
            this.$router.push("/depalist");
          } else if (res.data.code == 10169) {
            this.$toast("获取列表失败");
          }
        });
      } else if (this.text[i] == "产品") {
        this.$loading.open();
        query_category_info_list({
          data: {
            ent_id:this.$ent_id(),
            parent_id:'0',
            active:'1'
          }
        }).then(res => {
          this.$loading.close();
          if (res.data.code == 10193) {
            this.$router.push("/prodlist");
          } else if (res.data.code == 10194) {
            this.$toast("获取列表失败");
          }
        });
      }
    },
    // 第一幅图
    canver() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts_d"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            label: {
              formatter: this.ed_sj.slice(0,4)+'/'+this.ed_sj.slice(4)+'/' + "{value}"
            }
          }
        },
        grid: {
          y2: 10,
          x: 44,
          x2: 20,
          y: 35
        },
        xAxis: {
          name: "/天",
          boundaryGap: false,
          data: this.date_list.x_axis,
          show: false
        },
        yAxis: {
          type: "value",
          name: "单位:" + this.yuan,
          max: this.y_ma,
          nameTextStyle: {
            color: "#4B4B4B",
            fontWeight: 100
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#4B4B4B"
            }
          }
        },
        series: [
          {
            data: this.date_list.amt_aim_sum_list,
            name: "累计目标",
            type: "line",
            symbol: "none",
            color: "#FF9C5A",
            areaStyle: {
              color: "#F16977",
              opacity: 1
            },
            markLine: {
              symbol: "none",
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.date_list.amt_task_aim,
                  symbolSize: 1,
                  itemStyle: {
                    color: "#F37186"
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                }
              ]
            }
          },
          {
            name: "累计已完成",
            type: "line",
            data: this.amt_list_a,
            // symbol: "none",
            symbolSize: 1,
            areaStyle: {
              color: "#5596D4",
              opacity: 1
            },
            itemStyle: {
              normal: {
                color: params => {
                  switch (params.data.status) {
                    case 0:
                      return "red";
                    case 1:
                      return "green";
                    case -1:
                      return "#5596D4";
                  }
                },
                lineStyle: {
                  color: "transparent"
                }
              }
            },
            markLine: {
              symbol: "none",
              lineStyle: {
                color: "#8BDEFF"
              },
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.date_list.amt_inv_sum_list[this.date_list.amt_inv_sum_list.length - 1].amt_inv_sum,
                  symbolSize: 1,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                }
              ]
            }
          }
        ]
      });
    },
    // 第二幅图
    canver_two() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts"));
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "line",
            label: {
              formatter: this.ed_sj.slice(0,4)+'/'+this.ed_sj.slice(4)+'/'+"{value}"
            }
          }
        },
        grid: {
          y: 10,
          x: 44,
          x2: 20,
          y2: 35
        },
        xAxis: {
          name: "/天",
          nameGap: 6,
          boundaryGap: false,
          nameTextStyle: {
            color: "#4B4B4B",
            fontSize: 7
          },
          data: this.date_list.x_axis,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            interval:0,
            textStyle: {
              fontSize: 5,
              color: "#4B4B4B"
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#4B4B4B"
            }
          }
        },
        series: [
          {
            name: "",
            type: "bar",
            data: this.amt_list,
            animationDelay: function(idx) {
              return idx * 60;
            },
            barWidth: 5,
            markLine: {
              symbol: "none",
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.date_list.amt_inv_avg,
                  symbolSize: 1,
                  itemStyle: {
                    color: "#5596D4",
                    width: 2
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                },
              ]
            },
            itemStyle: {
              color: params => {
                if (
                  params.dataIndex >= this.date_list.amt_inv_sum_list.length
                ) {
                  return "#AB95F2";
                } else {
                  return "#5596D4";
                }
              }
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      })
    },
    // 第一幅图 横
    canver_heng() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts_d_h"));
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "line",
            label: {
              formatter: this.ed_sj.slice(0,4)+'/'+this.ed_sj.slice(4)+'/' + "{value}"
            }
          }
        },
        grid: {
          y2: 30,
          x: 44,
          x2: 35,
          y: 35
        },
        xAxis: {
          name: "/天",
          boundaryGap: false,
          data: this.date_list.x_axis,
          nameTextStyle: {
            color: "#4B4B4B",
            fontSize:10
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            interval:0,
            fontSize:10,
            show: true,
            textStyle: {
              color: "#4B4B4B"
            }
          }
        },
        yAxis: {
          type: "value",
          name: "单位:" + this.yuan,
          max: this.y_ma,
          nameTextStyle: {
            color: "#4B4B4B",
            fontWeight: 100
          },
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            show: true,
            textStyle: {
              color: "#4B4B4B"
            }
          }
        },
        series: [
          {
            data: this.date_list.amt_aim_sum_list,
            name: "累计目标",
            type: "line",
            symbol: "none",
            color: "#FF9C5A",
            areaStyle: {
              color: "#F16977",
              opacity: 1
            },
            markLine: {
              symbol: "none",
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.date_list.amt_task_aim,
                  symbolSize: 1,
                  itemStyle: {
                    color: "#F37186"
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                }
              ]
            }
          },
          {
            name: "累计已完成",
            type: "line",
            data: this.amt_list_a,
            // symbol: "none",
            symbolSize: 1,
            areaStyle: {
              color: "#5596D4",
              opacity: 1
            },
            itemStyle: {
              normal: {
                color: params => {
                  switch (params.data.status) {
                    case 0:
                      return "red";
                    case 1:
                      return "green";
                    case -1:
                      return "#5596D4";
                  }
                },
                lineStyle: {
                  color: "transparent"
                }
              }
            },
            markLine: {
              symbol: "none",
              lineStyle: {
                color: "#8BDEFF"
              },
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.date_list.amt_inv_sum_list[this.date_list.amt_inv_sum_list.length - 1].amt_inv_sum,
                  symbolSize: 1,
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                }
              ]
            }
          }
        ]
      });
    },
    // 第二幅图 横
    canver_two_heng() {
      var echarts = require("echarts");
      var myChart = echarts.init(document.getElementById("myCharts_h"));
      myChart.setOption({
        tooltip: {
          show: true,
          trigger: "axis",
          axisPointer: {
            type: "line",
            label: {
              formatter: this.ed_sj.slice(0,4)+'/'+this.ed_sj.slice(4)+'/'+"{value}"
            }
          }
        },
        grid: {
          y: 10,
          x: 44,
          x2: 20,
          y2: 35
        },
        xAxis: {
          name: "/天",
          nameGap: 6,
          boundaryGap: false,
          nameTextStyle: {
            color: "#4B4B4B",
            fontSize: 10
          },
          data: this.date_list.x_axis,
          axisTick: {
            show: false
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            interval:0,
            textStyle: {
              fontSize: 10,
              color: "#4B4B4B"
            }
          }
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              type: "dashed",
              color: "#eee"
            }
          },
          axisLine: {
            lineStyle: {
              color: "#eee"
            }
          },
          axisLabel: {
            textStyle: {
              color: "#4B4B4B"
            }
          }
        },
        series: [
          {
            name: "",
            type: "bar",
            data: this.amt_list,
            animationDelay: function(idx) {
              return idx * 60;
            },
            barWidth: 5,
            markLine: {
              symbol: "none",
              itemStyle: {
                normal: {
                  label: {
                    formatter: params => {
                      let value = "";
                      return value;
                    },
                    textStyle: {
                      color: "#ccc",
                      fontSize: 10
                    }
                  }
                }
              },
              data: [
                {
                  yAxis: this.date_list.amt_inv_avg,
                  symbolSize: 1,
                  itemStyle: {
                    color: "#5596D4",
                    width: 2
                  },
                  lineStyle: {
                    normal: {
                      width: 1
                    }
                  }
                },
              ]
            },
            itemStyle: {
              color: params => {
                if (
                  params.dataIndex >= this.date_list.amt_inv_sum_list.length
                ) {
                  return "#AB95F2";
                } else {
                  return "#5596D4";
                }
              }
            }
          }
        ],
        animationEasing: "elasticOut",
        animationDelayUpdate: function(idx) {
          return idx * 5;
        }
      })
    },
    // 横屏显示
    heng() {
      let self = this; // 这里
      window.addEventListener(
        "onorientationchange" in window ? "orientationchange" : "resize",
        function() {
          if (window.orientation === 90 || window.orientation === -90) {
            self.canver_a = false;
            self.canver_heng()
            self.canver_two_heng()
          } else {
            // alert(2222)
            location.reload();
            self.canver_a = true;
          }
        },
        false
      );
    },
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.arrivalmoneyred {
  height: 100vh;
  background-color: #fff;
  .header {
    height: 0.44rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0.15rem;
    background-color: #fff;
    border-bottom: 0.01rem solid #eee;
    img {
      height: 0.16rem;
      width: 0.08rem;
      margin-right: 0.08rem;
    }
    .text1 {
      font-size: 0.18rem;
      font-weight: 500;
      color: #000;
      font-family: PingFang-SC-Bold, PingFang-SC;
    }
    .text2 {
      font-size: 0.14rem;
      color: #a9a9a9;
      font-weight: 400;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 0.01rem solid #eee;
      height: 0.23rem;
      width: 0.63rem;
      border-radius: 0.03rem;
      img {
        margin-left: 0.06rem;
        height: 0.06rem;
        width: 0.12rem;
      }
    }
  }
  .category_box {
    .category {
      width: 1.18rem;
      background-color: #fff;
      position: absolute;
      right: -1.64rem;
      top: 0.42rem;
      border-radius: 0.06rem;
      ul {
        padding: 0 0.04rem;
        li {
          text-align: center;
          height: 0.4rem;
          line-height: 0.4rem;
          border-bottom: 0.01rem solid #eee;
          color: #1a2533;
          font-size: 0.14rem;
        }
      }
    }
  }
  .content {
    height: 88%;
    overflow-y: scroll;
    .zifu {
      width: 100%;
      background: #f6f6f6;
      dl {
        display: flex;
        justify-content: center;
        padding: 0 0.2rem;
        padding-top: 0.1rem;
        p{
          font-size: 0.12rem;
          color:#1A2533;
        }
        dd {
          // width:40%;
          display: flex;
          align-items: center;
          margin-left: 0.15rem;
          div {
            height: 0.06rem;
            width: 0.06rem;
            border-radius: 0.01rem;
            margin-right: 0.05rem;
          }
          .box_1 {
            background: #5596D4;
          }
          .box_2 {
            background: #f16977;
          }
          .box_3 {
            background-color: #ff9c5a;
          }
          .box_4 {
            background-color: #bcaeff;
          }
          font-family: DIN-Regular !important;
        }
      }
    }
    .danwei {
      color: #525252;
      font-size: 0.1rem;
      margin-left: 0.15rem;
    }
    #myChart {
      position: absolute;
      z-index: 10;
      top: 86px;
      left: 50%;
      margin-left: -109px;
    }
    .yisi {
      margin-top:0.13rem;
      padding: 0 0.18rem;
      dl {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        width: 3rem;
        margin-top: 0.03rem;
        dd {
          display: flex;
          align-items: center;
          font-size: 0.1rem;
          color: #a9a9a9;
          margin-left: 0.08rem;
          div {
            height: 0.08rem;
            width: 0.08rem;
            border-radius: 0.01rem;
            margin-right: 0.04rem;
          }
          .box_1 {
            background: #fe9d5c;
          }
          .box_2 {
            background: #5596D4;
          }
          .box_3 {
            background: #f16977;
          }
          .box_4 {
            background: #6abfa7;
          }
          .box_5 {
            background: #bcaeff;
          }
        }
      }
    }
  }
  .content_heng {
    height: 100%;
    overflow-y: scroll;
    .zifu {
      width: 100%;
      background: #f6f6f6;
      dl {
        display: flex;
        justify-content: center;
        padding: 0 0.2rem;
        padding-top: 0.05rem;
        p{
          font-size: 0.1rem;
          color:#1A2533;
        }
        dd {
          // width:40%;
          display: flex;
          align-items: center;
          margin-left: 0.15rem;
          font-size: 0.08rem;
          div {
            height: 0.06rem;
            width: 0.06rem;
            border-radius: 0.01rem;
            margin-right: 0.05rem;
          }
          .box_1 {
            background: #5596D4;
          }
          .box_2 {
            background: #f16977;
          }
          .box_3 {
            background-color: #ff9c5a;
          }
          .box_4 {
            background-color: #bcaeff;
          }
          font-family: DIN-Regular !important;
        }
      }
    }
    .danwei {
      color: #525252;
      font-size: 0.1rem;
      margin-left: 0.15rem;
    }
    .yisi {
      height: 0.41rem;
      line-height: 0.41rem;
      padding: 0 0.18rem;
      dl {
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
        margin-top: 0.03rem;
        dd {
          display: flex;
          align-items: center;
          font-size: 0.1rem;
          color: #a9a9a9;
          div {
            height: 0.08rem;
            width: 0.08rem;
            border-radius: 0.01rem;
            margin-right: 0.04rem;
          }
          .box_1 {
            background: #fe9d5c;
          }
          .box_2 {
            background: #5596D4;
          }
          .box_3 {
            background: #f16977;
          }
          .box_4 {
            background: #6abfa7;
          }
          .box_5 {
            background: #bcaeff;
          }
        }
      }
    }
  }
  
  .bottom_mode {
    width: 100%;
    height:30%;
    border-radius: 0.12rem 0.12rem 0 0;
    box-shadow: 0px -3px 6px 0px rgba(0, 0, 0, 0.2);
    background-color: #fff;
    .title {
      height: 0.43rem;
      border-radius: 0.06rem 0.06rem 0 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 0.21rem;
      border-bottom: 0.01rem solid #eee;
      .text_1 {
        height: 0.11rem;
        width: 0.11rem;
        margin-top: -0.1rem;
        img {
          height: 200%;
          width: 200%;
        }
      }
      .text_2 {
        color: #1a2533;
        font-size: 0.14rem;
        font-weight: 500;
      }
      .text_3 {
        color: #e82716;
        font-size: 0.14rem;
        font-weight: 500;
      }
    }
    .text_content {
      margin-top: 0.19rem;
      margin-bottom: 0.3rem;
      ul {
        display: flex;
        flex-wrap: wrap;
        li {
          height: 0.3rem;
          width: 0.96rem;
          border-radius: 0.06rem;
          border: 1px solid #eee;
          margin: 0 0.06rem 0.14rem 0.13rem;
          text-align: center;
          line-height: 0.3rem;
          color: #a9a9a9;
          font-size: 0.16rem;
        }
        .active {
          background-color: #e9eff8;
          color: #1a2533;
        }
      }
    }
  }
  .footer_box {
    position: absolute;
    bottom: 0.01rem;
    width: 100%;
    background-color: #fff;
    .footer {
      height: 0.32rem;
      display: flex;
      align-items: center;
      border-top: 0.01rem solid #eee;
      p {
        width: 50%;
        height: 0.32rem;
        text-align: center;
        font-size: 0.14rem;
        color: #a9a9a9;
        line-height: 0.32rem;
      }
      .p_text {
        color: #a9a9a9;
        &:hover,&:active,&:focus{
          background: #ccc;
        }
      }
    }
  }
  @media screen {
  }
}
</style>
